<template>
  <div class="body_all">
    <div class="ba_main" style="margin-top:0">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="签到设置" name="signIn">
          <h4>距离限制</h4>
          <div class="sourceC">
            <div style="display: block">
              <el-switch v-model="sourceR"> </el-switch>
              <span
                >用于拜访客户时提交的记录，开启后，将检查员工和客户直接的距离</span
              >
            </div>
            <div style="display: block">
              允许签到位置和客户定位间距离最大
              <el-select v-model="value" placeholder="请选择" size="mini">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              米
            </div>
            <div style="display: block">
              <span>超过此限制距离，将无法提交签到记录</span>
            </div>
          </div>
          <h4>陌生拜访</h4>
          <div class="sourceC">
            <div style="display: block">
              <el-switch v-model="sourceR"> </el-switch>
              <span
                >开启后，员工可进行陌生拜访操作。拜访时，拜访对象可不填写</span
              >
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="跟进记录类型设置" name="record">
          <div class="h4_btn">
            <h4>记录类型</h4>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="editerFollowUpData()"
              >新增跟进类型</el-button
            >
          </div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="跟进类型名称">
            </el-table-column>
            <el-table-column prop="name" label="是否启用">
              <template slot-scope="scope">
                <el-switch v-model="value"> </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <span
                  class="edit_btn"
                  @click="editerFollowUpData(scope.row)"
                  fixed="right"
                  >编辑</span
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="销售机会类型设置" name="opportunity">
          <div class="h4_btn">
            <h4>销售机会类型</h4>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="editerSaleData()"
              >新增销售机会类型</el-button
            >
          </div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="销售机会阶段">
            </el-table-column>
            <el-table-column prop="date" label="名称"> </el-table-column>
            <el-table-column prop="name" label="是否启用">
              <template slot-scope="scope">
                <el-switch v-model="value"> </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <span class="edit_btn" @click="editerSaleData(scope.row)"
                  >编辑</span
                >
                <span
                  class="edit_btn"
                  style="margin-left: 10px"
                  @click="delData(scope.row.id)"
                  >删除</span
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 新增跟进记录 -->
    <el-dialog
      :title="titleFollowUp"
      :close-on-click-modal="false"
      :visible.sync="followUpEditer"
      width="45%"
      :close-on-press-escape="false"
    >
      <div class="dialogDiv">
        <el-form
          :model="sourceData"
          :rules="rulesSource"
          ref="sourceData"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="跟进类型名称" prop="name">
            <el-input
              v-model="sourceData.name"
              placeholder="请输入来源"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="sourceData.start"> </el-switch>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot_btn">
        <el-button @click="resetFollowUpSource('sourceData')">取消</el-button>
        <el-button type="primary" @click="submitFollowUpSource('sourceData')"
          >提交</el-button
        >
      </div>
    </el-dialog>
    <!-- 新增销售机会类型 -->
    <el-dialog
      :title="titleSale"
      :close-on-click-modal="false"
      :visible.sync="saleEditer"
      width="45%"
      :close-on-press-escape="false"
    >
      <div class="dialogDiv">
        <el-form
          :model="sourceData"
          :rules="rulesSource"
          ref="sourceData"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="跟进类型名称" prop="name">
            <el-input
              v-model="sourceData.name"
              placeholder="请输入来源"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="sourceData.start"> </el-switch>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot_btn">
        <el-button @click="resetSaleSource('sourceData')">取消</el-button>
        <el-button type="primary" @click="submitSaleSource('sourceData')"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      loading: false,
      // 搜索条件
      searchList: {
        name: "",
        phone: "",
      },
      activeName: "signIn",
      sourceR: false, //来源是否必填
      followUpEditer: false, // 跟进记录状态
      titleFollowUp: "",
      saleEditer: false, // 销售机会状态
      titleSale: "",
      sourceData: {
        name: "",
        start: 0,
      },
      rulesSource: {
        name: [{ required: true, message: "请输入来源", trigger: "blur" }],
      },
      basicData: [],
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      //   标签
      labelSearch: "",
      labelList: [
        "微信好友状态",
        "需求重点",
        "客户行业",
        "联系人特征",
        "联系人分组",
      ],
    };
  },
  created() {},
  methods: {
    // 条件重置
    btnRefresh() {
      this.searchList = this.$options.data().searchList;
    },
    handleClick(tab, event) {
      this.activeName = tab.name;
    },
    // 跟进记录-新增&编辑
    editerFollowUpData(obj) {
      if (obj) {
        this.titleFollowUp = "编辑跟进记录";
      } else {
        this.titleFollowUp = "新增跟进记录";
      }
      this.followUpEditer = true;
    },
    resetFollowUpSource(formName) {
      this.$refs[formName].resetFields();
      this.followUpEditer = false;
      this.sourceData = this.$options.data().sourceData;
    },
    submitFollowUpSource(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.followUpEditer = false;
          this.sourceData = this.$options.data().sourceData;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 销售机会-新增&编辑
    editerSaleData(obj) {
      if (obj) {
        this.titleSale = "编辑销售机会类型";
      } else {
        this.titleSale = "新增销售机会类型";
      }
      this.saleEditer = true;
    },
    resetSaleSource(formName) {
      this.$refs[formName].resetFields();
      this.saleEditer = false;
      this.sourceData = this.$options.data().sourceData;
    },
    submitSaleSource(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
          this.saleEditer = false;
          this.sourceData = this.$options.data().sourceData;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    delData() {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style scoped>
.sourceC {
  line-height: 35px;
}
.labelType {
  display: flex;
}
.labelType .label {
}
.labelType .table {
  flex-grow: 1;
}
</style>